<script setup>
	// 获取 url 的参数 id 值
	import { onLoad } from '@dcloudio/uni-app'
	import { ref, onMounted } from 'vue'
	import taskApi from '@/apis/task.js'

	const taskId = ref(0)
	// 任务详情
	const taskDetail = ref({})

	// 获取地址参数
	onLoad((params) => {
		taskId.value = params.id
	})

	onMounted(() => {
		// 获取任务详情数据
		getDetail()
	})

	async function getDetail() {
		const { data } = await taskApi.detail(taskId.value)
		taskDetail.value = data // 将服务器响应回来的任务详情数据赋值给响应式变量
		console.log(data)
	}
</script>

<template>
	<view class="page-container">
		<view class="search-bar">
			<text class="iconfont icon-scan"></text>
			<input class="input" type="text" placeholder="输入运单号" />
		</view>
		<scroll-view scroll-y class="task-detail">
			<view class="scroll-view-wrapper">
				<view class="basic-info panel">
					<view class="panel-title">基本信息</view>
					<view class="timeline">
						<view class="line">{{ taskDetail.startAddress }}</view>
						<view class="line">{{ taskDetail.endAddress }}</view>
						<navigator
							hover-class="none"
							url="/subpkg_task/guide/index"
							class="guide"
						>
							<text class="iconfont icon-guide"></text>
							<text>开始导航</text>
						</navigator>
					</view>
					<view class="info-list">
						<view class="info-list-item">
							<text class="label">任务编号</text>
							<text class="value">{{ taskDetail.transportTaskId }}</text>
						</view>
						<view class="info-list-item">
							<text class="label">提货联系人</text>
							<text class="value">{{ taskDetail.startHandoverName }}</text>
						</view>
						<view class="info-list-item">
							<text class="label">联系电话</text>
							<text class="value">{{ taskDetail.startHandoverPhone }}</text>
						</view>
						<view class="info-list-item">
							<text class="label">预计提货时间</text>
							<text class="value">{{ taskDetail.planDepartureTime }}</text>
						</view>
						<view class="info-list-item">
							<text class="label">实际提货时间</text>
							<text class="value">{{ taskDetail.actualDepatureTime }}</text>
						</view>

						<view class="hr"></view>

						<view class="info-list-item">
							<text class="label">交付联系人</text>
							<text class="value">{{ taskDetail.finishHandoverName }}</text>
						</view>
						<view class="info-list-item">
							<text class="label">联系电话</text>
							<text class="value">{{ taskDetail.finishHandoverPhone }}</text>
						</view>
						<view class="info-list-item">
							<text class="label">预计送达时间</text>
							<text class="value">{{ taskDetail.planArrivalTime }}</text>
						</view>
						<view class="info-list-item">
							<text class="label">实际送达时间</text>
							<text class="value">{{ taskDetail.actualArrivalTime }}</text>
						</view>
					</view>
				</view>

				<view
					v-if="taskDetail.exceptionList && taskDetail.exceptionList.length > 0"
					class="except-info panel"
				>
					<view class="panel-title">异常信息</view>
					<view
						v-for="(exception, index) in taskDetail.exceptionList"
						:key="index"
						class="info-list"
					>
						<view class="info-list-item">
							<text class="label">上报时间</text>
							<text class="value">{{ exception.excepionTime }}</text>
						</view>
						<view class="info-list-item">
							<text class="label">异常类型</text>
							<text class="value">{{ exception.excepioType }}</text>
						</view>
						<view class="info-list-item">
							<text class="label">处理结果</text>
							<text class="value">{{ exception.handleResult }}</text>
						</view>
					</view>
				</view>

				<view class="panel pickup-info">
					<view class="panel-title">提货信息</view>
					<view class="label">提货凭证</view>
					<view class="pictures">
						<image
							v-for="(pic, index) in taskDetail.cargoPickUpPictureList"
							:key="index"
							class="picture"
							:src="pic.url"
							mode=""
						></image>

						<view
							v-if="
								!taskDetail.cargoPickUpPictureList ||
								taskDetail.cargoPickUpPictureList.length <= 0
							"
							class="picture-blank"
							>暂无图片</view
						>
					</view>
					<view class="label">货品照片</view>
					<view class="pictures">
						<image
							v-for="(pic, index) in taskDetail.cargoPictureList"
							:key="index"
							class="picture"
							:src="pic.url"
							mode=""
						></image>

						<view
							v-if="
								!taskDetail.cargoPictureList ||
								taskDetail.cargoPictureList.length <= 0
							"
							class="picture-blank"
							>暂无图片</view
						>
					</view>
				</view>

				<view class="delivery-info panel">
					<view class="panel-title">交货信息</view>
					<view class="label">交货凭证</view>
					<view class="pictures">
						<image
							v-for="(pic, index) in taskDetail.certificatePictureList"
							:key="index"
							class="picture"
							:src="pic.url"
							mode=""
						></image>

						<view
							v-if="
								!taskDetail.certificatePictureList ||
								taskDetail.certificatePictureList.length <= 0
							"
							class="picture-blank"
							>暂无图片</view
						>
					</view>
					<view class="label">货品照片</view>
					<view class="pictures">
						<image
							v-for="(pic, index) in taskDetail.deliverPictureList"
							:key="index"
							class="picture"
							:src="pic.url"
							mode=""
						></image>

						<view
							v-if="
								!taskDetail.deliverPictureList ||
								taskDetail.deliverPictureList.length <= 0
							"
							class="picture-blank"
							>暂无图片</view
						>
					</view>
				</view>
			</view>
		</scroll-view>

		<view class="toolbar" v-if="true">
			<navigator
				url="/subpkg_task/delay/index"
				hover-class="none"
				class="button secondary"
				>延迟提货</navigator
			>
			<navigator
				:url="`/subpkg_task/pickup/index?id=${taskId}`"
				hover-class="none"
				class="button primary"
				>提货</navigator
			>
		</view>
		<view class="toolbar" v-if="false">
			<navigator
				url="/subpkg_task/except/index"
				hover-class="none"
				class="button secondary"
				>异常上报
			</navigator>
			<navigator
				url="/subpkg_task/delivery/index"
				hover-class="none"
				class="button primary"
				>支付</navigator
			>
		</view>
		<view class="toolbar" v-if="false">
			<navigator
				url="/subpkg_task/record/index"
				hover-class="none"
				class="button primary block"
				>回车登记</navigator
			>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	@import './index.scss';
</style>
